<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>快捷入口</span>
            <el-button type="text" style="float:right;padding: 3px 0;">编辑</el-button>
          </div> 
          <el-row :gutter="20" class="add_style">
            <el-col :span="8">
               <el-button type="primary" >
                <i class="el-icon-circle-plus-outline"></i>添加用户
              </el-button>
            </el-col>
            <el-col :span="8">
               <el-button type="success" >
                <i class="el-icon-user-solid"></i>用户管理
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="info" >
                <i class="el-icon-loading"></i>用户分析
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="warning" size="medium">
                <i class="el-icon-more-outline" ></i>帖子管理
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger">
                <i class="el-icon-phone-outline"></i>投诉管理
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" @click="openWhether">查看天气</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据统计</span>
            <el-button type="text" style="float:right;padding: 3px 0;">编辑</el-button>
          </div> 
          <el-row :gutter="20" class="statistcs">
            <el-col :span="12">新增用户 <span>47489</span> 人</el-col>
            <el-col :span="12">新增帖子 <span>90</span> 条</el-col>
            <el-col :span="12">新增充值 <span>4598000.00</span> 元</el-col>
            <el-col :span="12">新增投诉<span> 450 </span>条</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <el-calendar v-model="value"></el-calendar>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:1rem;">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户详情</span>
          </div> 
          <Column id="columnId" width="500px" height="300px" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>每日统计</span>
          </div> 
          <LineMap id="lineId" width="500px" height="300px" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>行业分析</span>
          </div> 
          <Pie id="pieId" width="500px" height="300px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
  
</template>

<script>
import { Column , LineMap ,Pie } from "@/components"
export default {
  name:'Home',
  data() {
    return {
      value:new Date(),
      // name:''
    }
  },
  components:{
    Column,
    LineMap,
    Pie
  },
  methods:{
    openWhether(){
      this.$alert(<iframe disabled name="Weather" src="http://www.39ol.com/Plugin-2-101010100.html" width="200" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>, '天气情况', {
        confirmButtonText: 'GET',
        center:true,
        callback: () => {
          this.$message({
            type: 'success',
            message: '开心好心情'
          });
        }
      });
    }
  },
  
}
</script>

<style>
.el-calendar-day{
  text-align: center;
  height: 2.5rem !important;
}
.el-calendar-table thead th{
  padding: 0;
}
.add_style button{
  margin: 10px 0;
  padding: 2rem;
}
.add_style i{
  margin-right:0.5rem;
}
.statistcs>div{
  padding: 1rem;
  color:rebeccapurple;
  font-size: 1.4em;
}
.statistcs span{
  font-size: 1.6em;
  color: orangered;
}
</style>